<template>
    <a class="icon" @click="toBlog">
        <img
            src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
            alt="稀土掘金"
        />
    </a>
    <ul class="tab">
        <li @click="toBlog">首页</li>
        <li>沸点</li>
        <li>课程</li>
        <li>活动</li>
        <li @click="toChatGpt">ChatGpt</li>
    </ul>
    <div class="search">
        <el-input placeholder="搜索文章" class="input-with-select">
            <template #append>
                <el-button
                    style="color: #409eff; background-color: rgb(242, 243, 245)"
                    type="primary"
                    :icon="Search"
                />
            </template>
        </el-input>
        <el-button type="primary" @click="toBlogAdd">创建文章</el-button>
    </div>
    <el-avatar
        style="margin-left: 20px"
        :size="40"
        :src="userInfo.avatar ? userInfo.avatar : avatar"
        @click="goUserIndex"
    />
</template>
<script lang="ts">
    import { Search } from '@element-plus/icons-vue';
    import { defineComponent } from 'vue';
    export default defineComponent({
        name: 'BlogHeader',
        computed: {
            Search() {
                return Search;
            }
        }
    });
</script>

<script lang="ts" setup>
    import router from '@/router';
    import { useUserStore } from '@/store/user';

    const userInfo = useUserStore();
    const avatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

    function toBlogAdd() {
        router.push({ path: '/blog-edit/new' });
    }

    function toChatGpt() {
        router.push({ path: '/gpt' });
    }

    function toBlog() {
        router.push({ path: '/' });
    }

    function goUserIndex() {
        router.push({ path: '/user' })
    }
</script>

<style scoped>
    .search {
        height: 32px;
        margin-left: auto;
        display: flex;
    }

    .search > .input-with-select {
        margin-right: 20px;
        min-width: 200px;
    }

    .tab {
        height: 60px;
    }

    .tab > li {
        display: inline-block;
        line-height: 60px;
        margin-left: 20px;
        color: #606266;
    }

    .tab > li:hover {
        border-bottom: 2px #409eff solid;
        cursor: pointer;
        color: #303133;
    }

    .icon {
        display: inline-block;
        height: 60px;
        padding-left: 24px;
    }

    .icon > img {
        width: 107px;
        height: 60px;
        line-height: 60px;
    }

    @media (max-width: 600px) {
        .tab {
            display: none;
        }
    }
</style>
